<template>
  <div class="card-box">
    <h3>当前库存情况</h3>
    <p>
      总库存：<b>{{ total }}</b> 件，
      <!-- 西安：<b>{{ $store.state.xian }}</b> 件， -->
      西安：<b>{{ xian }}</b> 件，
      成都： <b>{{ chengdu }}</b> 件
    </p>
    <button class="dark" @click="gotoPage('/deliver')">发货管理 >></button>
  </div>
</template>

<script>
import { mapState,mapGetters } from 'vuex';
export default {
  data() {
    return {
      // xianCount: 100,
      chengduCount: 80,
      expressCount: 3
    };
  },
  computed: {
    // totalCount() {
    //   return this.xianCount + this.chengduCount;
    // },
    // 原样映射
    ...mapState(['chengdu']),
    // 原样映射
    ...mapGetters(['totalCount']),
    // 具名映射
    ...mapGetters({
      total : 'totalCount'
    }),

    // 模块化方法
    ...mapState({
      xian : state => state.xian.count,
      chengdu : state => state.chengdu.count
    })
  },
  methods: {
    // 跳转到指定页面
    gotoPage(to) {
      this.$router.push(to)
    }
  },
};
</script>
